<template>
	<view class="uiwu uiwu-flex-column uiwu-flex-center">
		<view class="uiwu-form">
			<view class="item uiwu-flex-align">
				<image src="/static/loginuser.png" mode="widthFix"></image>
				<input v-model="formData.phone" type="number" placeholder="请输入11位手机号码">
			</view>
			<view class="item uiwu-flex-align">
				<image src="/static/loginpwd.png" mode="widthFix"></image>
				<input v-model="formData.code" type="number" placeholder="请输入短信验证码">
				<text @tap="getCode">{{codeText}}</text>
			</view>
		</view>
		<view class="uiwu-button uiwu-flex-center" @tap="tapLogin(formData)">确定</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { uiwu } from '@/config/config';
	import { editPhone , sendVerify } from "../../api/api";
	interface FormData {
	  phone: string;
	  code: string;
	}
	const codeText = ref<string>('获取验证码');
	const formData = ref<FormData>({
		phone:'',
		code:''
	})
	/**
	 * getCode 获取短信验证码
	 */
	let t = null;//定时器
	const isSendCode = ref<boolean>(true)//锁防止重复点击
	const getCode = async () : Promise<any> => {
		if(!uiwu.validateInput(formData.value.phone,'phone')) return 
		if(!isSendCode.value) return
		isSendCode.value = false
		const result = await sendVerify({
			phone:formData.value.phone,
			type:'login'
		})
		if(!result) return isSendCode.value = true
		uiwu.toast('验证码发送成功')
		let ts = 59
		codeText.value = `已发送${ts}s`
		t = setInterval(()=>{
			if(ts == 0){
				clearInterval(t)
				isSendCode.value = true
				codeText.value = '重新获取'
				return 
			}
			ts--
			codeText.value = `已发送${ts}s`
		},1000)
	}
	/**
	 * tapLogin 授权登录
	 */
	const tapLogin = async (e:object) : Promise<any> => {
		if(!uiwu.validateInput(formData.value.phone,'phone')) return 
		if(!formData.value.code) return uiwu.toast('验证码不能为空')
		const result = await editPhone(e);
		if(!result) return
		uiwu.toast('修改成功')
		uni.navigateBack()
	}
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
	.uiwu{
		padding: 20rpx 0;
	}
	.uiwu-form{
		width: 100%;
		background: #FFFFFF;
		.item{
			width: 100%;
			height: 136rpx;
			padding: 0 24rpx;
			image{
				width: 44rpx;
				margin-right: 20rpx;
			}
			input{
				flex: 1;
				font-size: 28rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: bold;
				color: #EF821E;
			}
			&:nth-child(1){
				border-bottom: 1rpx solid #F1F1F1;
			}
		}
	}
	.uiwu-button{
		width: 670rpx;
		height: 80rpx;
		background: #EF821E;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 40rpx;
	}
</style>
